<!-- 审核表单 -->

<template>
  <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="钻石商品" width="450px"
    @close="emits('closeDialog')">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" :label-width="formLabelWidth">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="dialogForm.name" />
      </el-form-item>
      <el-form-item label="APP渠道" prop="channel">
        <el-input v-model="dialogForm.channel" />
      </el-form-item>
      <el-form-item label="商品ID" prop="goods_id">
        <el-input v-model="dialogForm.goods_id" />
      </el-form-item>
      <el-form-item label="商品图片" :label-width="formLabelWidth">
        <el-upload :action="uploadimgUrl" :data="{ project_code: 'mobybox' }" :show-file-list="false"
          :on-success="handleUploaderImgSuccess" :limit="1" :headers="TOKENT_HEADER" class="avatar-uploader">
          <img v-if="dialogForm.img" :src="dialogForm.img_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="钻石数量" prop="number">
        <el-input v-model="dialogForm.number" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="dialogForm.price" />
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <el-input v-model="dialogForm.currency" />
      </el-form-item>
      <el-form-item label="币种符号" prop="symobl">
        <el-input v-model="dialogForm.symbol" />
      </el-form-item>
      <el-form-item label="展示价格" prop="show_price">
        <el-input v-model="dialogForm.show_price" />
      </el-form-item>
      <el-form-item label="展示币种" prop="show_currency">
        <el-input v-model="dialogForm.show_currency" />
      </el-form-item>
      <el-form-item label="展示币种符号" prop="show_symobl">
        <el-input v-model="dialogForm.show_symbol" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dialogForm.description" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item label="排序数字" prop="rank">
        <el-input v-model="dialogForm.rank" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";
const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      channel:"",
      goods_id: "",
      name: "",
      img: "",
      img_show: "",
      number: "",
      price: "",
      discount_price: 0,
      currency: "",
      symbol: "",
      show_price: "",
      show_symbol: "",
      show_currency: "",
      description: "",
      rank: ""
    }
  },
  btnLoading: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "handleUploaderImgRequest"
]);

const formLabelWidth = "120px";
// 校验
const rules = {
  name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  img: [{ required: true, message: "请上传图片", trigger: "blur" }],
  goods_id: [{ required: true, message: "请输入商品ID", trigger: "blur" }],
  channel: [{ required: true, message: "请输入APP渠道", trigger: "blur" }],
  number: [{ required: true, message: "请输入钻石数量", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  currency: [{ required: true, message: "请输入币种名称", trigger: "blur" }],
  symbol: [{ required: true, message: "请输入币种符号", trigger: "blur" }],
  show_price: [{ required: true, message: "请输入展示价格", trigger: "blur" }],
  show_currency: [{ required: true, message: "请输入展示币种", trigger: "blur" }],
  show_symbol: [{ required: true, message: "请输入展示币种符号", trigger: "blur" }],
  description: [{ required: true, message: "请输入一个描述信息", trigger: "blur" }],
};
// 提交
const submit = dialogForm => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        delete param.img_show;
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch(error => {
      console.log(error);
    });
};
const handleUploaderImgSuccess = res => {
  emits("handleUploaderImgRequest", res, "img", "img_show");
};
</script>
